<template>
  <div class="common-layout">
    <div class="container">
      <div class="process-form">
        <el-form @submit.prevent="handleSubmit" label-width="120px">
          <el-form-item label="上传照片">
            <el-upload
              action=""
              list-type="picture"
              :auto-upload="false"
              :on-change="handleFileChange"
            >
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="拍摄地点">
            <el-input v-model="location" required></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="type" placeholder="请选择类型" required>
              <el-option label="人像" value="人像"></el-option>
              <el-option label="风景" value="风景"></el-option>
              <el-option label="人文" value="人文"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期时间">
            <el-date-picker
              v-model="datetime"
              type="datetime"
              placeholder="选择日期时间"
              required
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSubmit">处理</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="processedPhoto" class="processed-photo">
        <h3>处理后的照片:</h3>
        <img :src="processedPhoto" alt="Processed Photo" />
        <el-button @click="downloadPhoto" type="primary" style="margin-top: 20px"
          >下载处理后的照片</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const location = ref('')
const type = ref('')
const datetime = ref('')
const photo = ref(null)
const processedPhoto = ref(null)

const handleFileChange = (file) => {
  photo.value = file.raw
}

const handleSubmit = async () => {
  if (!photo.value) {
    ElMessage.error('请上传照片')
    return
  }
  // 调用训练好的GAN模型进行处理
  // 假设处理后的照片URL为 processedPhotoUrl
  const processedPhotoUrl = await processPhoto(
    photo.value,
    location.value,
    type.value,
    datetime.value
  )
  processedPhoto.value = processedPhotoUrl
}

const processPhoto = async (photo, location, type, datetime) => {
  // 模拟调用GAN模型处理照片的过程
  // 实际实现中需要替换为实际的API调用
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(URL.createObjectURL(photo))
    }, 2000)
  })
}

const downloadPhoto = () => {
  const link = document.createElement('a')
  link.href = processedPhoto.value
  link.download = 'processed_photo.jpg'
  link.click()
}
</script>

<style scoped>
.common-layout {
  padding: 20px;
  overflow: auto;
  max-height: 80vh;
}
.container {
  display: flex;
  justify-content: space-between;
}
.process-form {
  flex: 1;
  margin-right: 20px;
  width: 500px;
}
.processed-photo {
  flex: 1;
  text-align: center;
}
</style>
